<template>
  <div>
    <div class="search-container">
      <div class="search-inp-container">
        <!-- <el-select
          @keyup.enter.native="handleSearch"
          v-model="listQuery.typeId"
          placeholder="选择物资类型"
          style="width:170px"
          clearable
        >
          <el-option
            v-for="item in typeList"
            :key="item.typeId"
            :label="item.typeName"
            :value="item.typeId"
          >
            <span style="float: left">{{ item.typeName }}</span>
          </el-option>
        </el-select>-->
        <el-select
          @keyup.enter.native="handleSearch"
          v-model="listQuery.suppliesId"
          placeholder="选择需要查询的物资"
          style="width:200px"
          clearable
        >
          <el-option
            v-for="item in suppliesList"
            :key="item.suppliesId"
            :label="item.suppliesName"
            :value="item.suppliesId"
          >
            <span style="float: left">{{ item.suppliesName }}</span>
          </el-option>
        </el-select>
      </div>
      <el-button
        class="search-btn"
        type="primary"
        icon="el-icon-search"
        @click="handleSearch"
      >{{$t('m.QUERY')}}</el-button>
      <el-button
        class="search-btn"
        :autofocus="true"
        icon="el-icon-refresh"
        @click="refreshHandle"
      >{{$t('m.REFRESH')}}</el-button>
    </div>
    <el-table :key="tableKey" :data="list" v-loading="listLoading" border fit highlight-current-row>
      <el-table-column align="center" prop="suppliesName" :label="$t('m.MATERIALS_NAME')"></el-table-column>
      <el-table-column align="center" prop="suppliesNum" :label="$t('m.MATERIALS_NUM')"></el-table-column>
      <el-table-column align="center" prop="suppliesTypeName" :label="$t('m.TYPE_NAME')"></el-table-column>
      <el-table-column align="center" prop="realInfoString" :label="$t('m.ALARM_INFO')"></el-table-column>
      <el-table-column align="center" :label="$t('m.ALARM_TIME')">
        <template slot-scope="scope">
          <span>{{scope.row.createTime }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" :label="$t('m.OPERATION')" width="150">
        <template align="center" slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleGet(scope.row)">{{$t('m.VIEW')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.current"
        :page-size="listQuery.size"
        :page-sizes="[10, 40, 80, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      width="40%"
      :close-on-click-modal="false"
      @close="cancel('form')"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="100px"
        enctype="multipart/form-data"
      >
        <el-form-item :label="$t('m.TYPE_NAME')" prop="typeId">
          <el-input v-model="form.suppliesTypeName" maxlength="20" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item
          class="w347"
          :label="$t('m.MATERIALS_NUM')"
          placeholder="请输入物资编号"
          prop="suppliesNum"
        >
          <el-input v-model="form.suppliesNum" maxlength="20" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item
          class="w347"
          :label="$t('m.MATERIALS_NAME')"
          placeholder="请输入物资名称"
          prop="suppliesName"
        >
          <el-input v-model="form.suppliesName" maxlength="12" :disabled="disabled"></el-input>
        </el-form-item>

        <el-form-item :label="$t('m.ALARM_INFO')" prop="messCode">
          <el-input
            class="w347"
            style="white-space: pre-line;"
            v-model="form.realInfoString"
            placeholder
            rows="8"
            type="textarea"
            maxlength="300"
            disabled="disabled"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel('form')">{{$t('m.CANCEL')}}</el-button>
        <el-button
          v-if="dialogStatus=='create' && !disabled"
          type="primary"
          @click="create('form')"
        >{{$t('m.CONFIRM')}}</el-button>
        <el-button
          v-if="dialogStatus=='update' && !disabled"
          type="primary"
          @click="update('form')"
        >{{$t('m.CONRIME')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getTypeList, getSuppliesList } from '@/api/supplies'
import { fetchList } from '@/api/warning'
import { getVideo, dataflow } from '@/api/idispatch'
import { mapGetters } from 'vuex'
import { Message } from 'element-ui'
export default {
  data() {
    return {
      imageUrl: '',
      tableKey: 0,
      listLoading: false,
      list: [],
      orgOptions: [],
      listQuery: {
        current: 1,
        size: 10,
        suppliesId: '',
        // desc: 'create_date'
      },
      total: 0,
      mall_ad_add: true,
      mall_ad_update: true,
      mall_ad_del: true,
      sys_user_select: false,
      dialogFormVisible: false,
      form: {},
      rules: {
        typeId: [
          { required: true, message: '请选择物资类型', trigger: 'change' },
        ],
        suppliesNum: [
          { required: true, message: '请输入物资编号', trigger: 'blur' },
        ],
        suppliesName: [
          { required: true, message: '请输入物资名称', trigger: 'blur' },
        ],
      },
      textMap: {
        update: '编辑',
        create: '创建',
        get: '查看',
      },
      dialogStatus: '',
      typeOptions: [],
      isShowOptions: [],
      typeList: [],
      disabled: false,
      suppliesList: [],
    }
  },

  components: {},
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: '离线',
        1: '在线',
        9: '锁定',
      }
      return statusMap[status]
    },
  },
  computed: {
    ...mapGetters(['permissions']),
  },

  mounted() {
    this.getList()
    getTypeList({ current: 1, size: 9999 }).then((res) => {
      this.typeList = res.data.records
    })
    getSuppliesList().then((res) => {
      this.suppliesList = res.data
    })
    // this.getVideo()
  },

  methods: {
    getList() {
      this.listLoading = true
      this.listQuery.isAsc = false
      fetchList(this.listQuery).then((response) => {
        this.list = response.data.records
        this.total = response.data.total
        this.listLoading = false
        if (this.listQuery.current != 1 && this.list.length == 0) {
          this.listQuery.current = this.listQuery.current - 1
          this.getList()
        }
      })
    },
    // 取物资下拉框
    // getSuppilesList() {
    //   fetchList(this.listQuery).then((response) => {
    //     this.suppliesList = response.data.records
    //   })
    // },
    refreshHandle() {
      this.listQuery.current = 1
      this.listQuery.size = 10
      this.listQuery.typeId = ''
      this.getList()
      // this.getVideo()
    },
    handleGet(row) {
      this.dialogStatus = 'get'
      this.disabled = true
      this.dialogFormVisible = true
      this.form = { ...row }
    },
    handleSearch() {
      this.listQuery.current = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.current = val
      this.getList()
    },
    create(formName) {
      if (this.form.personList.length === 0) {
        this.$notify({
          title: '失败',
          message: '至少绑定一个负责人',
          type: 'error',
          duration: 2000,
        })
        return
      }
      for (let i = 0; i < this.form.personList.length; i++) {
        const element = this.form.personList[i]
        if (element.personName === '' || element.personName == undefined) {
          this.$notify({
            title: '失败',
            message: '请填写负责人姓名',
            type: 'error',
            duration: 2000,
          })
          return
        }
      }
      const set = this.$refs
      set[formName].validate((valid) => {
        if (valid) {
          addObj(this.form).then(() => {
            this.dialogFormVisible = false
            this.getList()
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000,
            })
          })
        } else {
          return false
        }
      })
    },
    cancel(formName) {
      this.dialogFormVisible = false
      this.$refs[formName].resetFields()
    },
    change(e) {
      this.$forceUpdate()
    },
  },
}
</script>


<style lang='scss' scoped>
.w347 {
  width: 100%;
}
.avatar-uploader1 .el-upload1 {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader1 .el-upload:hover1 {
  border-color: #409eff;
}
.avatar-uploader-icon1 {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar1 {
  width: 200px;
  height: 178px;
  display: block;
}
</style>

